<template>
  <view class="alumni-auth-page">
    <view class="top-bar">
      <view class="back-btn" @click="navBack">
        <view class="icon tn-icon-left tn-color-green"></view>
      </view>
      <view class="page-title" style="color: green;">校友认证</view>
    </view>

    <view class="auth-container">
      <view class="auth-icon">
        <image src="/static/icons/alumni-auth.png" mode="aspectFit"></image>
      </view>
      <view class="auth-text">您还不是校友，请认证</view>
      <button class="auth-btn" @click="handleAuth" style="background-color: green;">去认证</button>
      <!-- 使用checkbox-group确保状态同步 -->
      <checkbox-group class="agreement" @change="onAgreeChange">
        <label class="agreement-label" @click.stop>
          <checkbox class="agreement-checkbox" :checked="isAgreed" />
          <text class="agreement-text">我已阅读并同意《用户协议》和《隐私政策》</text>
        </label>
      </checkbox-group>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isAgreed: false // 默认不勾选
    }
  },
  methods: {
    handleAuth() {
      if (!this.isAgreed) {
        uni.showToast({
          title: '请先同意用户协议和隐私政策',
          icon: 'none',
          duration: 2000
        })
        return
      }
      // 跳转至指定页面（修改了此处的url）
      uni.navigateTo({
        url: '/minePages/alumn'
      })
    },
    navBack() {
      uni.navigateBack({ delta: 1 })
    },
    // 实时同步勾选状态
    onAgreeChange(e) {
      this.isAgreed = e.detail.value.length > 0
    }
  }
}
</script>

<style scoped>
.alumni-auth-page {
  min-height: 100vh;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30rpx;
  padding-top: 80rpx;
}

/* 顶部栏：控制整体布局 */
.top-bar {
  position: absolute;
  top: 30rpx;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 返回按钮：固定在左侧 */
.back-btn {
  position: absolute;
  left: 30rpx;
  display: flex;
  align-items: center;
  color: #0057b8;
  font-size: 28rpx;
}

/* 标题文字：水平居中 */
.page-title {
  font-size: 32rpx;
  color: #0057b8;
  font-weight: 500;
}

.auth-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 600rpx;
}

.auth-icon {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
}

.auth-icon image {
  width: 100%;
  height: 100%;
}

.auth-text {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 40rpx;
}

.auth-btn {
  width: 240rpx;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #0057b8;
  color: #fff;
  border-radius: 40rpx;
  font-size: 28rpx;
  margin-bottom: 40rpx;
}

.agreement {
  width: 100%;
}

.agreement-label {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #999;
  cursor: pointer;
}

.agreement-checkbox {
  transform: scale(0.8);
  margin-right: 10rpx;
  --checkbox-checked-color: #0057b8;
}

.agreement-text {
  text-decoration: underline;
  color: #0057b8;
}
</style>